<template>
  <div class='container'>

    <el-card class="box-card">

      <el-row>
        <el-col :span="24"> 试题录入</el-col>
      </el-row>

      <el-form label-width="80px" :model="form" :rules="formRules" ref="formRef">

        <el-row>
          <el-col :span="12">
            <el-form-item label="学科:" prop="subjectID" label-width="120px">
              <el-select @change="onSubjectChange" placeholder="请选择" v-model="form.subjectID">
                <el-option v-for="(item,index) in subjects" :key="index" :label="item.subjectName" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="catalogID" label="目录：" label-width="120px">
              <el-select v-model="form.catalogID" placeholder="请选择" @change="onDirectoryChange">
                <el-option v-for="(item, index) in directory" :key="index" :label="item.directoryName" :value="item.id"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="enterpriseID" label="企业：" label-width="120px">
              <el-select style="width:100%;" v-model="form.enterpriseID" placeholder="请选择" @change="onDirectoryChange">
                <el-option v-for="(item, index) in companyList" :key="index" :label="item.company" :value="item.id"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col>
            <el-form-item class="city-box" prop="provinces" label="城市：" label-width="120px">
              <el-select style="width:21%;" class="city-provinces" v-model="form.provinces" placeholder="请选择" @change="onProvinceChange">
                <el-option v-for="(item,index) in provinces" :key="index" :label="item" :value="item"> </el-option>
              </el-select>
              <el-select style="width:21%;" class="city-cs" v-model="form.city" placeholder="请选择">
                <el-option v-for="(v, k, i) in citys" :key="i" :value="v" :label='v'> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 方向 -->
        <el-row>
          <el-col :span="12">
            <el-form-item prop="direction" label="方向：" label-width="120px">
              <el-select style="width:100%;" v-model="form.direction" placeholder="请选择">
                <el-option v-for="(item, index) in direction" :key="index" :label="item" :value="item"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col>
            <el-form-item label="题型：" label-width="120px">
              <el-radio v-model="form.questionType" label="1">单选</el-radio>
              <el-radio v-model="form.questionType" label="2">多选</el-radio>
              <el-radio v-model="form.questionType" label="3">简答</el-radio>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col>
            <el-form-item label="难度：" label-width="120px">
              <el-radio v-model="form.difficulty" label="1">简单</el-radio>
              <el-radio v-model="form.difficulty" label="2">一般</el-radio>
              <el-radio v-model="form.difficulty" label="3">困难</el-radio>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="题干：" prop="question" label-width="120px">

          <quill-editor ref="myTextEditor" v-model="form.question"></quill-editor>
        </el-form-item>

        <el-form-item label="选项:" v-if="form.questionType !== '3' ">
          <el-row v-for="item in form.options" :key="item.code" style="margin-bottom: 10px">
            <el-radio @change="radioChange(item)" v-model="item.isRight" :label="true" v-if="form.questionType === '1'">
              <strong>{{item.code + '：' }}</strong>
              <el-input v-model="item.title" />
              <!-- 上传图片 -->
              <image-upload style="display: inline-block;" :imgUrl.sync="item.img" :limit="1" />
            </el-radio>
            <el-checkbox @change="checkChange" v-if="form.questionType === '2'" v-model="item.isRight" true-label="true" false-label="false">
              <strong>{{item.code + '：' }}</strong>
              <el-input v-model="item.title" />
              <image-upload style="display: inline-block;" :imgUrl.sync="item.img" :limit="1" />
            </el-checkbox>
          </el-row>
          <el-form-item>
            <el-button @click="handelAddCheckbox" type="danger" :disabled="form.questionType !== '2'">+增加选项与答案</el-button>
          </el-form-item>
        </el-form-item>

        <el-row>
          <el-col :span="12">
            <el-form-item label="解析视频：" label-width="120px">
              <el-input v-model="form.videoURL" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col>
            <el-form-item prop="answer" label="答案解析：" label-width="120px">
              <quill-editor ref="myTextEditor" v-model="form.answer"></quill-editor>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="题目备注：" label-width="120px">
              <el-input type="textarea" :rows="4" v-model="form.remarks">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="题目标签：" label-width="120px">
              <el-select v-model="form.tags" placeholder="请选择" style="width:100%;">
                <el-option v-for="item in tagsList" :key="item.tagName" :label="item.tagName" :value="item.tagName"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-button class="submit-a" type="primary" @click.prevent="confirmSub" label-width="120px">确认提交</el-button>
      </el-form>

    </el-card>

  </div>
</template>

<script>
import { add } from '@/api/hmmm/questions.js'
import { list } from '@/api/hmmm/subjects'
import { list as list1 } from '@/api/hmmm/directorys'
import { provinces, citys } from '@/api/hmmm/citys'
// import { difficulty, questionType } from '@/api/hmmm/constants'
import { list as listTags } from '@/api/hmmm/tags'
import { list as listCompany } from '@/api/hmmm/companys'

export default {
  data () {
    return {
      addForm: '',
      cover: '',
      radio: '',
      // 多选添加的字母列表
      alphabet: ['E', 'F', 'G', 'H', 'I'],
      // 选项多选的列表
      checkList: [],
      subjects: [],
      directory: [],
      companyList: [],
      provinces: provinces(),
      citys: [],
      direction: ['o2o', '外包服务', '企业服务', '互联网金融', '企业咨询', '互联网', '电子商务', '其他'],
      tagsList: [],
      difficulty: {
        1: '简单',
        2: '一般',
        3: '困难'
      },
      // 难度
      questionType: {
        1: '单选',
        2: '多选',
        3: '简答'
      },
      form: {
        subjectID: '',
        catalogID: '',
        enterpriseID: '',
        province: '',
        city: '',
        direction: '',
        questionType: '1',
        difficulty: '1',
        question: '',
        options: [{
          code: 'A',
          title: '',
          // img: '', // 图片url
          isRight: false // 单选 / 多选 是否选中
        }, {
          code: 'B',
          title: '',
          // img: '', // 图片url
          isRight: false
        }, {
          code: 'C',
          title: '',
          // img: '', // 图片url
          isRight: false
        }, {
          code: 'D',
          title: '',
          // img: '', // 图片url
          isRight: false
        }],
        videoURL: '',
        answer: '',
        remarks: '',
        tags: ''
      },

      questionsRules: {

        subjectID: '',
        catalogID: '',
        enterpriseID: '',
        province: '',
        city: '',
        direction: '',
        questionType: '1',
        difficulty: '1',
        question: '',

        videoURL: ' ',
        answer: '',
        remarks: '',
        tags: ''
      },
      formRules: {
        subjectID: [{ required: true, message: '请选择学科' }],
        catalogID: [{ required: true, message: '请选择目录' }],
        enterpriseID: [{ required: true, message: '请选择企业' }],
        province: [{ required: true, message: '请选择地区' }],
        direction: [{ required: true, message: '请选择方向' }],
        question: [{ required: true, message: '请输入题干' }],
        answer: [{ required: true, message: '请输入答案解析' }],
        difficulty: [
          { required: true, message: '请选择难度', trigger: 'change' }
        ],
        questionType: [
          { required: true, message: '请选择题型', trigger: 'change' }
        ]

      }

    }
  },
  created () {
    // 学科
    this.getSubList()
    // 企业
    this.getComList()
  },
  // computed: {
  //   title () {
  //     if (this.$router.query.id) {
  //       return '试题修改'
  //     } else {
  //       return '试题录入'
  //     }
  //   }

  // },
  methods: {
    // 添加选择项
    handelAddCheckbox () {
      this.form.options.push({
        code: this.alphabet[0],
        title: '',
        // img: '', // 图片url
        isRight: false // 单选 / 多选 是否选中
      })
      this.alphabet.splice(0, 1)
    },
    // 添加试题
    confirmSub () {
      this.$refs.formRef.validate(async valid => {
        if (!valid) return this.$message.warning('请完善信息')
        try {
          const { status } = await add(this.form)
          if (status === 200) {
            this.$message.success('上传试题成功')
            this.$router.push('/questions/list')
          } else {
            this.$message.error('上传试题失败')
          }
        } catch {
          this.$message.error('上传试题失败')
        }
      })
    },
    radioChange (item) {
      this.form.options.forEach(items => {
        items.isRight = false
      })
      item.isRight = true
    },
    // 标签列表
    async getTagList () {
      try {
        const { data: res } = await listTags({
          subjectID: this.form.subjectID
        })
        if (res.items.length) {
          this.tagsList = res.items
        } else {
          this.$message.error('获取标签列表失败')
        }
      } catch {
        this.$message.error('获取标签列表失败')
      }
    },
    // 学科
    async getSubList () {
      try {
        const { data: res } = await list({

          page: 1,
          pagesize: 100

        })
        this.subjects = res.items
      } catch (err) { }
    },

    // 企业列表
    async getComList () {
      const { data: res } = await listCompany()
      console.log(res)
      this.companyList = res.items
    },

    // 目录选择框发生变化后触发的函数
    onDirectoryChange (val) {
      // 获取标签
      this.getTagList()
    },
    // 学科选择框发生变化

    async onSubjectChange (val) {
      // this.form.tags = null
      // this.form.catalogID = null
      const { data: res } = await list1(
        {
          subjectID: val,
          page: 1,
          pagesize: 100

        }

      )
      this.directory = res.items
      this.tagsList = []
    },

    // 市级发生变化
    onProvinceChange (val) {
      this.form.city = ''
      this.citys = citys(val)
    }

  }

}
</script>

<style lang="scss" scoped>
.el-form-item__label {
  width: 200px !important;
}
.box-card {
  margin: 20px 20px 0;
}

.city-cs {
  margin-left: 18px;
}

::v-deep .ql-container {
  height: 200px !important;
}
.submit-a {
  margin-left: 120px !important;
}
</style>
